<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        总价格:{{ totalPrice }}
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data(){
                return {
                    books:[
                        {id:111,name:'西游记',price:105},
                        {id:112,name:'三国演义',price:110},
                        {id:113,name:'红楼梦',price:125},
                        {id:114,name:'水浒传',price:108},
                        {id:115,name:'重生之我叫王发发',price:188},
                    ]
                }
            },
            // computed-计算属性
            // computed里面的东西都是属性，虽然写法与函数差不多,但是它是一个属性，用法也是与data里面的属性一样
            computed:{
                totalPrice(){
                    console.log(111)
                    let allPrice = 0
                    for(let i = 0 ; i < this.books.length ; i++){
                        allPrice += this.books[i].price
                    }
                    return allPrice
                }
            },
            // 方法 写法是函数
            methods:{
            }
        })
    </script>
</body>
</html>